<template>
  <span class="comp-gt-lt-filter">
    选出
    <a-select
      v-model="value.compareMode"
      class="mode"
      :class="{
        fix: ['>=', '<='].includes(value.compareMode),
      }"
      :default-value="defaultCompareMode"
      size="small"
      @change="onCompareModeChange"
    >
      <a-select-option
        v-for="(op, i) in modeOptions"
        :key="i"
        :value="op.value"
      >
        {{ op.label }}
      </a-select-option>
    </a-select>
    <a-input-number
      v-model="value.delimiter"
      class="delimiter"
      size="small"
      :default-value="defaultDelimiter"
      :min="min"
      :max="max"
      @change="onDelimiterChange"
    />
    的单元格
  </span>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'

@Component({
  name: 'compare-filter',
})
export default class CompareFilter extends Vue {
  /**
   * 绑定值 {
        compareMode: '>',
        delimiter: 0
      }
   */
  @Prop({
    type: Object,
    default() {
      return {
        compareMode: '>',
        delimiter: 0,
      }
    },
  })
  value!: Object

  /**
   * 默认对比模式
   */
  @Prop({
    type: String,
    default() {
      return '>'
    },
  })
  defaultCompareMode!: string | number

  /**
   * 默认对比模式
   */
  @Prop({
    type: [String, Number],
    default() {
      return 0
    },
  })
  defaultDelimiter!: string | number

  /**
   * 最小值
   */
  @Prop({
    type: Number,
    default() {
      return -999999999999
    },
  })
  min!: number

  /**
   * 最大值
   */
  @Prop({
    type: Number,
    default() {
      return 999999999999
    },
  })
  max!: number

  /**
   * 对比模式
   */
  modeOptions: Array<{ label: string; value: string }> = [
    {
      label: '>',
      value: '>',
    },
    {
      label: '>=',
      value: '>=',
    },
    {
      label: '=',
      value: '=',
    },
    {
      label: '<=',
      value: '<=',
    },
    {
      label: '<',
      value: '<',
    },
  ]

  /** 验证操作 */
  validateValue(): {
    compareMode: string
    delimiter: number
  } {
    const value = this.value as {
      compareMode: string
      delimiter: number
    }
    const { compareMode } = value
    let { delimiter } = value

    switch (compareMode) {
      case '>':
        if (delimiter > this.max) {
          delimiter = this.max - 1
        }
        break
      case '>=':
        if (delimiter > this.max) {
          delimiter = this.max
        }
        break
      case '=':
        if (delimiter > this.max) {
          delimiter = this.max
        } else if (delimiter < this.min) {
          delimiter = this.min
        }
        break
      case '<=':
        if (delimiter < this.min) {
          delimiter = this.min
        }
        break
      case '<':
        if (delimiter <= this.min) {
          delimiter = this.min + 0.00001
        }
        break
      default:
        break
    }
    return {
      delimiter,
      compareMode,
    }
  }

  /** 同步数据到store */
  syncCompareInfo(info: any) {
    DataStore.setVrCompareInfo(info)
  }

  private emitValueChangeEvent() {
    this.$nextTick(() => {
      const valueFixed = this.validateValue()
      this.$emit('input', valueFixed)
      this.syncCompareInfo(valueFixed)
    })
  }

  /** 限定值变化事件 */
  onDelimiterChange() {
    this.emitValueChangeEvent()
  }

  /** 对比模式变化事件 */
  onCompareModeChange() {
    this.emitValueChangeEvent()
  }
}
</script>
<style lang="less" scoped>
.comp-gt-lt-filter {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  width: auto;

  /deep/ .mode {
    color: #5d637e;
    margin: 0 6px;
    width: 46px;

    &.fix {
      width: 54px;
    }
  }

  /deep/ .delimiter {
    color: #5d637e;
    margin: 0 4px;
    width: 86px;
  }

  // /deep/ .ant-input-number-handler-wrap {
  //   opacity: 1;
  // }
}
</style>
